'use client'
import "./globals.css";
import React, { useEffect, useMemo, useState } from 'react';
import { useRouter, usePathname } from 'next/navigation';
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
  WindowsOutlined
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Button, Layout, Menu, theme, Drawer, Row, Col } from 'antd';


const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

// 定义一个函数getItem，用于创建一个MenuItem对象
function getItem(
  // label：React.ReactNode，表示菜单项的标签
  label: React.ReactNode,
  // key：React.Key，表示菜单项的唯一标识
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem('首页', '/page', <WindowsOutlined />),
  getItem('客户', '/page/kh', <PieChartOutlined />),
  getItem('商机', '/page/sj', <DesktopOutlined />),
  getItem('订单', '/page/dd', <UserOutlined />),
  getItem('财务', '/page/cw', <TeamOutlined />),
  getItem('审批', '/page/sp', <FileOutlined />)
];
const items2: MenuItem[] = [
  getItem('李亦涵', '1'),
  getItem('张治涛', '1'),
  getItem('张盛焯', '1'),
  getItem('李泽宇', '1'),
  getItem('薛梓豪', '1'),
  getItem('首页', '1')
]
// 创建面包屑映射
const breadcrumbNameMap: Record<string, string> = {
  '/page': '首页',
  '/page/kh': '客户',
  '/page/sj': '商机',
  '/page/dd': '订单',
  '/page/cw': '财务',
  '/page/sp': '审批'
};

// 导出一个默认函数，名为RootLayout
export default function RootLayout({

  children,
}: Readonly<{

  children: React.ReactNode;
}>) {
  // 使用usePathname获取当前路径名
  const name = usePathname()
  // 使用useRouter获取路由对象
  const router = useRouter();

  const conent = useMemo(() => {
    if (name == '/page/cw') {
      return [items2[3]]
    } else if (name == '/page/sp') {
      return [items2[4]]
    }
    else if (name == '/page/sj') {
      return [items2[1]]
    }
    else if (name == '/page/dd') {
      return [items2[2]]
    }
    else if (name == '/page/kh') {
      return [items2[0]]
    }
    else if (name == '/page/zztshop') {
      return [items2[6]]
    }
  }, [router, name])
  // 使用theme.useToken获取主题颜色和圆角大小
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();


  // 生成面包屑项
  const breadcrumbItems = useMemo(() => {
    const paths = name.split('/').filter(Boolean);
    const items = paths.map((_, index) => {
      const url = `/${paths.slice(0, index + 1).join('/')}`;
      return {
        title: breadcrumbNameMap[url] || url,
      };
    });

    // 添加首页
    return [...items];
  }, [name]);

  // const { token } = theme.useToken();
  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };
  // 返回一个布局组件
  const [token,setToken] = useState('');
  useEffect(()=>{
    setToken(localStorage.getItem('token') || '')
  },[])
  return (
    <Layout style={{ height: '100vh' }}>
      {/* // 侧边栏组件，可折叠 */}
      <Sider width='100' trigger={null}>
        {/* // logo */}
        <div className="demo-logo-vertical" />
        {/* // 菜单组件，点击时跳转到对应路径 */}
        <Menu
          onClick={(a) => {
            router.push(a.key)
          }} theme="dark" defaultSelectedKeys={[name]} mode="inline" items={items} />
        <Button style={{
          marginTop: '10px',
          width: '100%',
          height: '40px',
          borderRadius: '0px',
          backgroundColor: '#001529',
          color: 'white',
          border: 'none',
          borderTop: '1px solid #fff',
          fontSize: '16px',
          fontWeight: 'bold',
          position: 'absolute',
          bottom: '0px',
        }} onClick={showDrawer}>
          <TeamOutlined />
        </Button>
        <Drawer title="用户信息" onClose={onClose} open={open} placement="left" width={200} >
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"40px"}}>
            <div><UserOutlined height={40} width={40} style={{ fontSize: '40px',backgroundColor: '#ccc',borderRadius:"50%",padding:"10px",color:"white"}} /></div>
            <div style={{fontSize: '10px'}}>
              <p>账号:{token}</p>
              <p style={{margin:"10px 0"}}>姓名:赵小刚</p>
              <p>部门:销售一部</p>
            </div>
          </div>
          <Row gutter={16} style={{
            marginBottom: '20px',
          }}>
            <Col className="gutter-row" span={9} style={{ marginRight: '10px', marginLeft: '20px',fontSize: '10px', fontWeight: 'bold' }}>
              <div >修改资料</div>
            </Col>
            <Col className="gutter-row" span={9} style={{fontSize: '10px', fontWeight: 'bold' }}>
              <div >修改密码</div>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col className="gutter-row" span={9} style={{ marginRight: '10px', marginLeft: '20px' ,fontSize: '10px', fontWeight: 'bold' }}>
              <div >修改头像</div>
            </Col>
            <Col className="gutter-row" span={9} style={{fontSize: '10px', fontWeight: 'bold' }}>
              <div onClick={()=>{
                localStorage.removeItem("token")
                router.push("/")
              }}>退出系统</div>
            </Col>
          </Row>
        </Drawer>
      </Sider>
      <Menu
        style={{ width: 150 }}
        defaultSelectedKeys={['1']}
        mode="inline"
        items={conent}
      />
      {/* // 主内容区域 */}
      <Layout style={{ height: '100vh', overflowY: "auto" }}>
        {/* // 头部组件 */}
        <Header style={{ padding: 0, height: '50px', background: colorBgContainer }} >
          <Breadcrumb style={{ margin: '16px 0' }} items={breadcrumbItems} />
        </Header>
        {/* // 内容区域 */}
        <Content style={{ marginRight: '16px', marginLeft: "16px", marginTop: "10px", height: "calc(100vh - 124px - 40px)", }}>

          <div
            style={{
              padding: 24,
              minHeight: 360,
              outline: '1px solid #ccc',
              hyphenateCharacter: ' ',
              overflow: 'hidden',
              background: colorBgContainer,
              borderRadius: borderRadiusLG,

            }}
          >
            {/* // 子组件 */}
            <html lang="en">
              <body >
                {children}
              </body>
            </html>
          </div>
        </Content>
      </Layout>
    </Layout>

  );
}

